<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <p v-if="this.sj >= 0 && sj <= 5">
          已经凌晨了，您该休息了，{{ s_name }}同学！当前系统时间为:{{
            nowdatetime
          }}
        </p>
        <p v-else-if="this.sj >= 6 && sj <= 8">
          早上好，{{ s_name }}同学！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 9 && sj <= 11">
          上午好，{{ s_name }}同学！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 12 && sj <= 13">
          中午好，{{ s_name }}同学！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 14 && sj <= 18">
          下午好，{{ s_name }}同学！当前系统时间为:{{ nowdatetime }}
        </p>
        <p v-else-if="this.sj >= 19 && sj <= 23">
          晚上好，{{ s_name }}同学！当前系统时间为:{{ nowdatetime }}
        </p>
      </el-header>
      <el-container>
        <el-aside width="200px"
          ><el-button style="background-color: #d3dce6" @click="tongji"
            >查看成绩柱状图</el-button
          >
          <el-button style="background-color: #d3dce6" @click="chaxunchengji"
            >查询个人成绩</el-button
          >
          <el-button style="background-color: #d3dce6" @click="rili"
            >查看日历</el-button
          ><el-button style="background-color: #d3dce6" @click="tuichu"
            >返回登录</el-button
          ></el-aside
        >
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
const axios = require("axios");
export default {
  name: "Student",
  data() {
    return {
      value: new Date(),
      s_name: "",
      nowdatetime: "",
      s_xuehao: "",
      sj: new Date().getHours(),
    };
  },
  methods: {
    panduan(){
      if(this.$store.state.s_xuehao===null){
       this.$router.push({ name: "Home" });
      }
    },
    tuichu() {
     this.$router.push({ name: "Home" });
    },
    rili() {
      this.$router.push({ path: "/student/srili" });
    },
    chaxunchengji() {
      this.$router.push({ path: "/student/chaxunchengji" });
    },
    tongji() {
      this.$router.push({ path: "/student/student_tongji" });
    },
    chaxun() {
      let _this = this;
      console.log(_this.s_xuehao)
      if(_this.s_xuehao==''){
        _this.$router.push({ path: "/" });
      }else{
      axios
        .get("https://localhost:44391/api/zhuce/chaxunxh", {
          params: {
            s_xuehao: this.s_xuehao,
          },
        })
        .then(function (response) {
          console.log(response.data);
          _this.s_name = response.data.s_name;
        });
        }
    },
    setIntervalDatetime() {
      setInterval(this.formatDatetime, 1000);
    },
    formatDatetime() {
      let datetime = new Date();
      let year = datetime.getFullYear();
      let month = datetime.getMonth() + 1;
      let date = datetime.getDate();
      let hour = datetime.getHours();
      let minute = datetime.getMinutes();
      let second = datetime.getSeconds();
      this.nowdatetime =
        year +
        "年" +
        this.formatNum(month) +
        "月" +
        this.formatNum(date) +
        "日" +
        this.formatNum(hour) +
        "时" +
        this.formatNum(minute) +
        "分" +
        this.formatNum(second) +
        "秒";
    },
    formatNum(num) {
      return num < 10 ? "0" + num : num;
    },
  },
  mounted() {
    this.s_xuehao = this.$store.state.s_xuehao;
    // this.panduan();
    this.setIntervalDatetime();
    this.chaxun();
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
  height: 685px;
}

.el-main {
  /* background-color: #e9eef3; */
  color: var(--el-text-color-primary);
  text-align: center;
  /* line-height: 160px; */
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
p {
  font-size: 26px;
  margin: 0px;
}
.el-button {
  width: 180px;
  height: 50px;
  margin-left: 10px;
  margin-top: 30px;
  font-size: 20px;
}
.el-calendar {
  /* background-color: aqua; */
  /* width: 900px;*/
  height: 629px;
  --el-calendar-cell-width: 83px;
}
</style>